/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/11/16
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Modal, Form, Input } from 'antd';

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};

const EditModal = ({
  item = {},
  onConfirm,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleConfirm = () => {
    validateFields((errors) => {
      if (errors) return;
      const correctData = {
        ...getFieldsValue,
        key: item.key,
      };

      onConfirm(correctData);
    });
  };

  const betterModalOptions = {
    ...modalProps,
    onOk: handleConfirm,
  };

  return (
    <Modal {...betterModalOptions}>
      <Form layout="horizontal">
        <FormItem label="团员ID" hasFeedback {...formItemLayout} >
          {getFieldDecorator('memberNO', {
            initialValue: item.memberNO,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="手机" hasFeedback {...formItemLayout} >
          {getFieldDecorator('mobile', {
            initialValue: item.mobile,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="电子邮箱" hasFeedback {...formItemLayout} >
          {getFieldDecorator('email', {
            initialValue: item.email,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="职务" hasFeedback {...formItemLayout} >
          {getFieldDecorator('email', {
            initialValue: item.job,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="所在部门" hasFeedback {...formItemLayout} >
          {getFieldDecorator('department', {
            initialValue: item.department.name,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="角色" hasFeedback {...formItemLayout} >
          {getFieldDecorator('roles', {
            initialValue: item.roles,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
      </Form>
    </Modal>
  );
};

EditModal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onConfirm: PropTypes.func,
};

export default
Form.create()(EditModal);
